<template>
  <uni-swiper-dot class="uni-swiper-dot-box" :info="list" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
    <swiper :style="{height: (height + 20) + 'rpx'}" @change="change" :current="curIndex" :autoplay="isAutoplay" circular>
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="swiper-item" :style="{height: height + 'rpx', padding}" @click="clickItem(item.url)">
          <image :src="item.img" mode="scaleToFill" class="item-img"></image>
        </view>
      </swiper-item>
    </swiper>
  </uni-swiper-dot>
</template>

<script setup>
const props = defineProps({
  height: {
    type: [String, Number],
    default: 220,
  },
  padding: {
    type: [String, Number],
    default: "20rpx",
  },
  mode: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: [],
  },
  changeSwiper: {
    type: Function,
    default: (e) => {},
  },
  isAutoplay: {
    type: Boolean,
    default: true,
  },
  curIndex: {
    type: [String, Number],
    default: 0,
  },
});

const current = ref(0);
const dotsStyles = reactive({
  backgroundColor: "rgba(255,255,255,0.5)",
  border: "#fff",
  selectedBackgroundColor: "#fff",
  selectedBorder: "#fff",
});
const change = (e) => {
  current.value = e.detail.current;
  props.changeSwiper(current.value);
};
// todo
const clickItem = (url) => {
  if (url) uni.navigateTo({ url });
};
</script>

<style lang=scss scoped>
.swiper-item {
  .item-img {
    width: 100%;
    height: 100%;
  }
}
</style>